<template>
	<view class="top-box fixed clearfix bai" :style="'background:'+background">
		<view class="top-logo left clearfix">
			<image src="/static/logo/logo.png" mode="aspectFit"></image>
		</view>
		<view class="top-labels left clearfix">
				<view class="top-label-home top-active left" @click="navigateTo('/pages/index/index')">
					首页
				</view>
			
			<view class="top-label left">
				草稿
			</view>
			<view class="top-label left" @click="navigateTo('/pages/works/works')">
				作品
			</view>
			<view class="top-label left">
				素材
			</view>
		</view>
		
		<view class="top-right right clearfix">
			<view class="top-right-upload left" @click="navigateTo('/pages/works/publish')">
				<uni-icons type="icon-shangchuan5" size="13" color="#fff" custom-prefix="iconfont"></uni-icons>
				上传作品
			</view>
			<view class="top-login right" v-if="!userinfo || !userinfo._id" @click="showLogin=true">
				登录
			</view>
			
			<view class="top-userinfo-image right relative" @mouseenter="showLoginMenu = true" @mouseleave="showLoginMenu = false" v-else>
				<image :src="userinfo.avatar||'https://mp-2298d5e4-aa54-4efc-a8b7-bbb75295a007.cdn.bspapp.com/ai-header/10.webp'"></image>
				<view class="top-userinfo-menu left clearfix absolute" v-if="showLoginMenu == true">
					<view class="top-userinfo-top absolute">
						<uni-icons type="icon-shaixuan-shangjiantou" custom-prefix="iconfont" size="50" color="#fff"></uni-icons>
					</view>
					
					<view class="top-userinfo-images left clearfix">
						<view class="top-userinfo-img left clearfix">
							<image :src="userinfo.avatar||'https://mp-2298d5e4-aa54-4efc-a8b7-bbb75295a007.cdn.bspapp.com/ai-header/10.webp'"></image>
						</view>
						<view class="top-userinfo-texts left clearfix">
							<view class="ellipsis">{{userinfo.nickname}}</view>
							<view class="ellipsis">{{userinfo._id}} <uni-icons type="icon-fuzhi_o" style="margin-left:10px;cursor:pointer;" title="复制" custom-prefix="iconfont" size="18" color="#999"></uni-icons></view>
						</view>
						
						<view class="top-price-box left clearfix">
							<view class="top-price-number left clearfix">
								<text>魔豆余额</text>
								<text>{{userinfo.dou}}</text>
							</view>
							<view class="top-price-submit right clearfix" @click="alertPay()">
								<view>充值</view>
							</view>
						</view>
						
						
						<view class="top-items left clearfix" style="margin-top:30px;" @click="navigateTo('/pages/works/works')">
							<label>
								<uni-icons type="icon-yingyong7" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>我的作品</label>
						</view>
						
						<view class="top-items left clearfix" @click="navigateTo('/pages/userinfo/index?page=order')">
							<label>
								<uni-icons type="icon-shiyongtiaokuan" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>我的订单</label>
						</view>
						
						
						<view class="top-items left clearfix" @click="navigateTo('/pages/userinfo/index?page=edit')">
							<label>
								<uni-icons type="icon-wode5" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>账号设置</label>
						</view>
						
						<view class="top-items left clearfix" style="border-bottom:none;" @click="loginOut()">
							<label>
								<uni-icons type="icon-tuichudenglu3" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>退出登录</label>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<!--登录插件-->
		<login :show="showLogin" @confirm="setUserinfo" @close="closeLogin"></login>
		<zmt-deposit-money :userinfo="userinfo" @close="setCloseMoney" :show="showMoney"></zmt-deposit-money>
	</view>
</template>
<style scoped>
	.top-right-upload{width:90px;height:32px;line-height:32px;text-align: center;border-radius: 5px;background-image: linear-gradient(90deg, #4287fe, #298bfe 25%, #0f8ffd 51%, #25b4c1);margin-top:16px;font-size:12px;color:#fff;cursor:pointer;}
	.top-items label{margin-right:15px;}
	.top-items:hover{color:#999;cursor: pointer;}
	.top-items{width:70%;margin-left:15%;line-height:47px;border-bottom:1px solid #efefef;font-size:14px;color:#666;text-align: center;cursor:pointer;}
	.top-price-submit view{padding-left:15px;padding-right:15px;line-height:35px;height:35px;text-align: center;color:#fff;background:#2979ff;border-radius: 5px;margin-top:10px;margin-left:20px;font-size:13px;float:left;cursor:pointer;}
	.top-price-submit{width:40%;height:50px;line-height:50px;margin-top:10px;}
	.top-price-number text:last-child{font-size:18px;font-weight:bold;}
	.top-price-number text:first-child{font-size:14px;color:#666;}
	.top-price-number text{line-height:25px;text-align: center;float:left;text-align:center;width:100%;}
	.top-price-number{width:50%;height:50px;margin:10px;}
	.top-price-box{width:90%;height:68px;margin-left:5%;margin-top:30px;background-image: linear-gradient(75deg, #d9e5f2, #f0f7fe);border-radius: 8px;}
	.top-userinfo-texts view:last-child{font-size:13px;color:#999;}
	.top-userinfo-texts view:first-child{font-size:14px;font-weight:500;color:#333;}
	.top-userinfo-texts view{float:left;width:100%;line-height:20px;height:20px;}
	.top-userinfo-texts{width:calc(100% - 70px);height:40px;line-height:40px;margin:5px;}
	.top-userinfo-img image{width:40px;height:40px;border-radius: 50%;}
	.top-userinfo-img{width:40px;height:40px;border-radius: 50%;border:1px solid #eee;margin:5px;}
	.top-userinfo-images{width:90%;margin-left:5%;margin-top:20px;height:50px;}
	.top-userinfo-top{width:30px;height:30px;right:10px;top:-27px;}
	.top-userinfo-menu{width:300px;height:400px;background:#fff;z-index:99999;top:50px;right:0px;border-radius: 15px;box-shadow: 0 4px 12px 0 rgba(36, 104, 242, .08);}
	.top-userinfo-image image{width:40px;height:40px;border-radius: 50%;cursor:pointer;}
	.top-userinfo-image{width:40px;height:40px;margin:10px;border:1px solid #eee;border-radius: 50%;margin-right:35px;}
	.top-login{height:22px;padding:5px 25px;background:#2979ff;text-align: center;color:#fff;border-radius: 10px;line-height:22px;margin-top:13px;margin-right:30px;font-size:14px;cursor:pointer;}
	.top-right{width:220px;height:60px;}
	.top-label:hover{background:rgba(255,255,255,.7)}
	.top-label,.top-label-home{height:20px;line-height:20px;font-size:14px;font-weight:bold;color:#333;border-radius: 8px;padding: 4px 12px;margin-top:18px;margin-right:20px;cursor:pointer;}
	.top-active{height:16px;line-height:16px;font-size:14px;font-weight:bold;color:#fff;background-image: linear-gradient(90deg, #4287fe, #298bfe 25%, #0f8ffd 51%, #25b4c1);border-radius: 8px;padding: 4px 12px;margin-top:19px;}
	.top-labels{width:50%;height:60px;line-height:60px;margin-left:30px;}
	.top-logo image{height:100%;width:100%;}
	.top-logo{width:160px;height:35px;margin:12.5px;}
	.top-box{width:100%;height:60px;left:0;right:0;top:0;z-index:9999;}
</style>

<script>
	export default {
		name:"top",
		data() {
			return {
				background:'none',
				showLogin:false,
				userinfo:null,
				showLoginMenu:false,
				showMoney:false,//显示支付弹窗
			};
		},
		props:['scrollTop'],
		watch:{
			"scrollTop"(val){
				if(val > 0){
					this.background = '#f5f9ff';
				}else{
					this.background = 'none';
				}
			}
		},
		mounted() {
			var that = this;
			uni.getStorage({
				key:'login-userinfo',
				success:function(e){
					that.userinfo = e.data;
				}
			})
		},
		methods:{
			//关闭支付弹窗
			setCloseMoney(){
				this.showMoney = false;
			},
			//弹出支付
			alertPay(){
				this.showMoney = true;
				this.showLoginMenu = false;
			},
			//跳转页面
			navigateTo(item){
				//判断是否登录，如果未登录先登录
				var userinfo = this.userinfo;
				if((!userinfo || !userinfo._id) && item!='/pages/index/index'){
					this.showLogin = true;
				}else{
					uni.navigateTo({
						url: item
					});
				}
				
			},
			//退出登录
			loginOut(){
				var that = this;
				uni.removeStorage({
					key:'login-userinfo',
					success:function(){
						uni.showToast({
							title:'退出成功',
							icon:'none'
						})
						that.userinfo = null;
						uni.redirectTo({
							url:'/pages/index/index'
						});
					}
				})
			},
			//登录成功以后获取用户信息
			setUserinfo(e){
				this.showLoginMenu = false;
				this.userinfo = e;
			},
			//关闭登录弹窗更新状态
			closeLogin(e){
				this.showLogin = e;
			}
		}
	}
</script>